<template>
	<view class="edit-page">
		<u-toast ref="uToast"></u-toast>
		<!-- 表单区域 -->
		<view class="form-wrap">
			<!-- 收货人 -->
			<view class="form-item">
				<text class="label">收货人
				<text style="color: red">*</text>
				</text>
				<u-input v-model="form.consignee" placeholder="请输入姓名" border="none" class="footSizeBize" :custom-style="{ padding: '20rpx 0' }" />
			</view>

			<!-- 联系电话 -->
			<view class="form-item">
				<text class="label">联系电话
				<text style="color: red">*</text>
				</text>
				<u-input v-model="form.phone" type="number" placeholder="请输入手机号" border="none" class="footSizeBize" :custom-style="{ padding: '20rpx 0' }" />
			</view>

			<!-- 地区选择 -->
			<view class="form-item">
				<text class="label">所在地区
				<text style="color: red">*</text>
				</text>
				<view class="picker-wrap">
					<text @tap="open" class="picker-text footSizeBize">{{ areaText || '请选择省/市/区' }}</text>
					<u-icon @tap="open" name="arrow-right" color="#999" size="28rpx"></u-icon>
					<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible" />
				</view>
			</view>
			
			
			<!-- 地区选择 -->
			<view class="form-item">
				<text class="label">所在小区
				<text style="color: red">*</text>
				</text>
				<u-input v-model="form.community" placeholder="小区名，请填写完整的小区名，不要简写！" border="none" class="footSizeBize"  :custom-style="{ padding: '20rpx 0' }" />
				
			</view>

			<!-- 详细地址 -->
			<view class="form-item">
				<text class="label">详细地址
				<text style="color: red">*</text>
				</text>
				<u-input v-model="form.address" placeholder="楼栋、门牌号等" border="none" class="footSizeBize"  :custom-style="{ padding: '20rpx 0' }" />
			</view>

			<!-- 默认地址 -->
			<!-- 			<view class="default-switch">
				<text>设为默认地址</text>
				<u-switch v-model="form.is_default" :activeValue="true" :inactiveValue="false" active-color="#FF5A5F"></u-switch>
			</view> -->
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn">
			<u-button @click="saveAddressBtn" shape="circle" type="primary" size="normal">保存地址</u-button>
		</view>
	</view>
</template>

<script>
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker';
import { getAddressDetail, putAddress, saveAddress } from '@/apis/address_callback.js';
import store from '@/store';

export default {
	// 在data中完整初始化表单数据
	data() {
		return {
			visible: false,
			maskCloseAble: true,
			defaultValue: '430102',
			column: 3,
			addressId: 0,
			userId: uni.getStorageSync('userInfo').id,
			form: {
				consignee: '', // 收货人
				phone: '', // 联系电话
				address: '', // 详细地址
				is_default: false, // 是否默认地址
				province: '', // 省
				city: '', // 市
				district: '', // 区
				community: '' // 区
			},
			areaText: '' // 显示的地区文本
		};
	},

	components: {
		cityPicker
	},

	onLoad(options) {
		// 判断是否为编辑模式
		if (options.id) {
			store.commit('setLoadingShow', true);
			this.addressId = options.id;
			this.getAddress(options.id);
		} else {
			this.initDefaultData();
		}
	},

	methods: {
		saveAddressBtn() {
			// 基础表单验证
			const { consignee, phone, address, province, city, district, community } = this.form;
			if (!consignee || !phone || !address || !province || !city || !district|| !community) {
				this.$refs.uToast.show({
					type: 'warning',
					position: 'top',
					title: '警告',
					message: '请填写完整地址信息'
				});
				return;
			}

			if (this.addressId > 0) {
				store.commit('setLoadingShow', true);
				this.form.user_id = this.userId;
				putAddress(
					this.form,
					this.addressId,
					() => {
						store.commit('setLoadingShow', false);
						this.$refs.uToast.show({
							type: 'success',
							position: 'top',
							title: '提示',
							message: '保存成功'
						});
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					},
					(err) => {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							title: '错误',
							message: '保存失败'
						});
					}
				);
			} else {
				store.commit('setLoadingShow', true);
				this.form.user_id = this.userId;
				saveAddress(
					this.form,
					() => {
						store.commit('setLoadingShow', false);
						this.$refs.uToast.show({
							type: 'success',
							position: 'top',
							title: '提示',
							message: '新增成功'
						});
						// 返回上一页
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					},
					(err) => {
						this.$refs.uToast.show({
							type: 'error',
							position: 'top',
							title: '错误',
							message: '新增失败'
						});
					}
				);
			}
		},

		open() {
			this.visible = true;
		},
		confirm(val) {
			this.form.city = val.cityName;
			this.form.province = val.provinceName;
			this.form.district = val.areaName;
			this.form.district_code = Number(val.code);
			this.areaText = val.provinceName + '/' + val.cityName + '/' + val.areaName;
			this.visible = false;
			
		},
		cancel() {
			this.visible = false;
		},
		// 初始化默认数据
		initDefaultData() {
			this.form = {
				consignee: '',
				phone: '',
				address: '',
				is_default: false,
				province: '',
				city: '',
				district: '',
				district_code: '',
				community: '',
			};
			this.areaText = '';
		},
		// 获取地址详情
		async getAddress(id) {
			// 模拟API请求
			getAddressDetail(
				id,
				(res) => {
					store.commit('setLoadingShow', false);
					this.form = {
						consignee: res.consignee,
						phone: res.phone,
						address: res.address,
						is_default: res.is_default,
						province: res.province,
						city: res.city,
						district: res.district,
						district_code: res.district_code,
						community: res.community
					};
					this.areaText = res.province + '/' + res.city + '/' + res.district;
				},
				(err) => {
					this.$refs.uToast.show({
						type: 'error',
						position: 'top',
						title: '错误',
						message: '获取失败'
					});
				}
			);
		},
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/variables.scss'; // ✅ 必须引入
	
.footSizeBize{
	fontSize:$font-size-base;
}
.edit-page {
	padding: 30rpx;
	min-height: 100vh;
	background: #f5f5f5;
}

.form-wrap {
	background: #fff;
	border-radius: 16rpx;
	padding: 0 30rpx;
}

.form-item {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #eee;

	.label {
		display: block;
		font-size: $font-size-base;
		color: #666;
		margin-bottom: 20rpx;
	}

	&:last-child {
		border-bottom: none;
	}
}

.picker-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;

	.picker-text {
		font-size: $font-size-base;
		color: #333;

		&::placeholder {
			color: #999;
		}
	}
}

.default-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40rpx 0;
	font-size: 30rpx;
}

.submit-btn {
	position: fixed;
	bottom: 40rpx;
	left: 30rpx;
	right: 30rpx;
}
</style>
